<template>
  <!-- 房间列表 -->
  <div class="house-container">
    <p class="housing-title">精品房间</p>
    <div v-for="(item, index) in houseData" class="house-item" :key="index">
      <div class="house-info">
        <p class="room-number">房间号：{{item.roomName}}</p>
        <p class="room-info"><span>{{item.area}}㎡&emsp;{{item.floor}}楼</span><span class="room-price">&emsp;￥{{item.rent}}/月</span></p>
      </div>
      <div class="room-status">
        <span class='m-status' @click="goOther(1, item.id)">预约看房</span>
        <span class='m-status' @click="goOther(2, item.id, item.areaid)">立即预定</span>
      </div>
    </div>
    <div class="load-more" v-show="moreData" @click="loadMore">加载更多>></div>
    <div class="load-more" v-show="noMoreData">没有更多数据了!</div>
  </div>
</template>

<script>
/*eslint-disable */
export default {
  data () {
    return {
      data: {
        roomTypeId: this.$route.query.id,
        pages: 1,
        pageNumber: 10
      },
      pageCount: '', // 房间总数
      houseData: [], // 房间数据
      moreData: false,
      projectId: this.$route.query.projectId, // 项目ID
      token: '', // token
      noMoreData: false
    }
  },
  created () {
    this.getInit(this.data)
  },
  methods: {
    getInit (data) {
      console.log(data)
      this.$axiosGeting(this.$api.queryRoomTypeId, data).then(res => {
        if (res.code === '0000') {
          this.houseData = this.houseData.concat(res.data.rooms)
          this.pageCount = res.data.pageCount
          this.moreData = true
        }
      })
    },
    goOther (type, roommId, areaid) {
      this.$vux.toast.text('请联系平台客服')
      // if(type == 2){
      //   this.$axiosGeting(this.$api.getApartmentRoomView, {id: roommId, areaid: areaid}).then(res => {
      //     if (res.code === '0000') {
      //       window.localStorage.signHouseInfo = JSON.stringify(res.data)
      //       this.$router.push('/orgInfoConfirm');
      //     } else {

      //     }
      //   })
      // }else{
      //   // 温馨提示
      //   this.$vux.confirm.show({
      //     title: '温馨提示',
      //     content: '正在开发中！'
      //   })
      // }
    },
    // 加载更多
    loadMore () {
      if (this.data.pages * this.data.pageNumber - this.pageCount >= 0) {
        this.$vux.toast.text('暂无更多数据')
        this.noMoreData = true
        this.moreData = false
      } else {
        this.data.pages++
        this.noMoreData = false
        this.moreData = true
        console.log('shuju', this.data)
        this.getInit(this.data)
      }
    }
  }
}
</script>

<style lang="less">
  .house-container{
    font-size: 15px;
    background: #fff;
    height: 100vh;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
    .load-more{
      font-size: 15px;
      text-align: center;
      color:#ff9600;
      height: 50px;line-height: 50px;
      background: #fff;
      border-top: 1px solid #eee;
    }
    .housing-title{
      padding-left: 12px;
      line-height: 1.25;
      font-size: 14px;
      margin:15px 0px;
      // margin-left: 2px;
      color: #000;
      border-left: 3px solid #ff9600;
    }
    .house-item{
      font-size: 18px;
      border-top:1px solid #eee;
      padding:15px;
      line-height: 1.7;
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      .house-info{
        .room-number{
          color:#585858;
        }
        .room-info{
          color:#a3a3a3;
          font-size: 15px;
          .room-price{
            color:#ff3c00;
          }
        }
      }
      .room-status{

        .m-status{
          color:white;
          display: block;
          width:90px;
          height:30px;
          font-size: 15px;
          background: #ff9600;
          border-radius: 5px;
          text-align: center;
          line-height: 30px;
          margin-top: 10px;
        }
        .m-status:nth-child(1) {
          margin-top: 0;
        }

      }
    }
  }
</style>
